<template>
	<view>
		<nav-bar ref="navBar" :zIndex="2000" fontColor="#FFF" transparentFixedFontColor="#FFF" :titleCenter="false" bgColor="themeBgColor"
		 type="transparentFixed">
			<!-- #ifndef MP -->
			商品详情
			<!-- #endif -->
			<view class="nav_right_info" slot="right">
				<text class="goods_poster" @click="onPageJump('/pages/home/shop/goodsPoster?objId=' + dataInfo.objId)"></text>
				<text v-if="dataInfo.goodsType == 'spike'" class="collect" :class="{ active: dataInfo.collection }" @click="onCollection"></text>
				<!-- #ifdef APP-PLUS -->
				<button class="share" @click="onShare"></button>
				<!-- #endif -->
				<text v-if="module.customerService || module.shop" class="shop_car" @click="onJumpShopCar"></text>
			</view>
			<view class="nav_right_info" slot="transparentFixedRight">
				<text class="goods_poster black" @click="onPageJump('/pages/home/shop/goodsPoster?objId=' + dataInfo.objId)"></text>
				<text v-if="dataInfo.goodsType == 'spike'" class="collect black" :class="{ active: dataInfo.collection }" @click="onCollection"></text>
				<!-- #ifdef APP-PLUS -->
				<button class="share black" @click="onShare"></button>
				<!-- #endif -->
				<text v-if="module.customerService || module.shop" class="shop_car black" @click="onJumpShopCar"></text>
			</view>
		</nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- 轮播 -->
		<view class="banner_swiper" id="banner_swiper"></view>
		<!-- 商品信息 -->
		<view class="goods_info_box spike" v-if="dataInfo.goodsType == 'spike'">
			<view class="price_box">
				<view class="sales_price">
					<view class="label">秒杀价</view>
					<view class="price">
						<text>{{ dataInfo.ptPrice }}</text>
					</view>
				</view>
				<view class="original_price" v-if="dataInfo.priceShop > dataInfo.ptPrice">原价 {{ dataInfo.priceShop }}</view>
			</view>
			<view class="countdown" v-if="dataInfo.goodsStatus == 3001"><text>商品已售空</text></view>
			<view class="countdown" v-else-if="dataInfo.goodsStatus == 3002"><text>商品已下架</text></view>
			<view class="countdown" v-else-if="buyState == 1000">
				<text>距结束还剩：</text>
				<view class="countdown_value">
					<view>{{ countdownHour }}</view>
					<text>:</text>
					<view>{{ countdownMinute }}</view>
					<text>:</text>
					<view>{{ countdownSecond }}</view>
				</view>
			</view>
			<view class="countdown" v-else-if="buyState == 2000">
				<text>秒杀开始时间：</text>
				<view class="time">{{ dataInfo.spikeBeginTime }}</view>
			</view>
			<view class="countdown" v-else-if="buyState == 3000">
				<text>秒杀结束时间：</text>
				<view class="time">{{ dataInfo.spikeEndTime }}</view>
			</view>
		</view>
		<view class="goods_info_box" v-else>
			<view class="price_box">
				<view class="sales_price">
					<view class="label" v-if="dataInfo.goodsType == 'pt'">拼团价</view>
					<view class="price" v-if="dataInfo.goodsType == 'pt'">
						<text>{{ dataInfo.ptPrice }}</text>
					</view>
					<view class="price" v-else>
						<text>{{ dataInfo.priceDiscount }}</text>
					</view>
				</view>
				<view class="original_price" v-if="dataInfo.priceShop">原价 {{ dataInfo.priceShop }}</view>
			</view>
			<view class="collect" @click="onCollection">
				<text :class="{ active: dataInfo.collection }"></text>
				<view>收藏</view>
			</view>
		</view>
		<view class="goods_title" :class="{ spike: dataInfo.goodsType == 'spike' }">{{ dataInfo.name }}</view>
		<view class="cell_list line lineTop">
			<view class="cell_left">运费：{{ dataInfo.pricePostage }}</view>
			<view class="cell_right">{{ dataInfo.numSales }}人购买</view>
		</view>
		<view class="cell_list line lineTop" v-if="dataInfo.goodsType == 'pt'">
			<view class="cell_left">成团时长</view>
			<view class="cell_right">{{ dataInfo.ptTimeLongStr }}</view>
		</view>
		<view class="cell_list active" @click="specificationPopupChange(1000)">
			<view class="cell_left">选择</view>
			<view class="cell_right arrow black">选择规格</view>
		</view>
		<!-- <view class="cell_list">
			<view class="cell_left">发货地</view>
			<view class="cell_right">广东深圳</view>
		</view> -->
		<!-- <view class="cell_list" @click="servicePopupShow = true">
			<view class="cell_left">服务</view>
			<view class="cell_right black arrow">假一赔四 · 7天内可退换 · 过敏包退</view>
		</view>
		<view class="cell_list active" @click="parameterPopupShow = true">
			<view class="cell_left">参数</view>
			<view class="cell_right arrow black">品牌、品名、产地</view>
		</view> -->
		<!-- 拼团信息 -->
		<view class="fight_info_box" v-if="dataInfo.goodsType == 'pt'">
			<view class="title">
				<view>{{ popupFightList.length }}人在拼单，可直接参与</view>
				<text @click="onShowFightPopup">查看全部</text>
			</view>
			<swiper v-if="popupFightList.length > 0" class="fight_swiper" vertical :display-multiple-items="2" :autoplay="true"
			 :interval="3000" circular :duration="1000">
				<swiper-item v-for="(item, index) of popupFightList" :key="index">
					<view class="fight_item" @click="specificationPopupChange(4000, item.objId)">
						<image :src="item.userHeadImg" mode="aspectFill"></image>
						<view class="info">
							<view class="name_people">
								<view class="name">{{ item.userNickName }}</view>
								<view class="people">
									还差
									<text>{{ item.ptRemaining }}</text>
									人拼成
								</view>
							</view>
							<view class="time" v-if="item.buyState == 1000">剩余{{ item.countdown }}</view>
							<view class="time" v-else>拼团已结束</view>
						</view>
						<button>去拼单</button>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 评论 -->
		<view class="comment_box">
			<view class="title">
				<view>用户评价（{{ dataInfo.commentNum }}）</view>
				<text class="color" @click="onPageJump('/pages/home/shop/comment?objId=' + dataInfo.objId)">查看全部</text>
			</view>
			<comment-item v-if="dataInfo.comments && dataInfo.comments.length > 0" :item="dataInfo.comments[0]"></comment-item>
		</view>
		<!-- 为你推荐 -->
		<view class="recommend_box" v-if="likeGoodsList.length > 0">
			<view class="title">
				<view>为你推荐</view>
			</view>
			<view class="goods_box">
				<view class="goods_item" v-for="(item, index) of likeGoodsList" :key="index" @click="onGoodsJump(item)">
					<image :src="item.img" mode="aspectFill"></image>
					<view class="name">{{ item.name }}</view>
					<view class="price">{{ item.priceDiscount }}</view>
				</view>
			</view>
		</view>
		<!-- 店铺信息 -->
		<view class="shop_info_box" v-if="module.shop">
			<image :src="dataInfo.shopLogo" mode="aspectFill"></image>
			<view class="info">
				<view class="name">{{ dataInfo.shopName }}</view>
				<view class="other">
					<text class="label" v-if="dataInfo.selfSupport">自营</text>
					<text class="shop_collect">{{ dataInfo.shopCollect }}人收藏</text>
				</view>
			</view>
			<button @click="onGoStore">进店逛逛</button>
		</view>
		<!-- 商品详情 -->
		<view class="goods_details_box">
			<view class="content" v-if="dataInfo.introduceContent && dataInfo.introduceContent.length > 0">
				<view v-for="(item, index) in dataInfo.introduceContent" :key="index">{{ item }}</view>
			</view>
			<image v-for="(item, index) of dataInfo.introduceImgs" :key="index" :src="item" mode="widthFix"></image>
		</view>
		<!-- 其他推荐 -->
		<!-- <view class="recommend_box" v-if="likeGoodsList.length > 0">
			<view class="title">
				<view>其他推荐</view>
			</view>
			<view class="goods_box">
				<view class="goods_item" v-for="(item,index) of likeGoodsList" :key="index" @click="onGoodsJump(item)">
					<image :src="item.img" mode="aspectFill"></image>
					<view class="name">{{ item.name }}</view>
					<view class="price">{{ item.priceDiscount }}</view>
				</view>
			</view>
		</view> -->
		<!-- 下单导航 -->
		<view class="interval"></view>
		<view class="fixed_nav_box">
			<view class="left_info">
				<view v-if="module.shop" @click="onGoStore">
					<image src="../../../static/icon/ic_shop.png" mode="aspectFit"></image>
					<text>店铺</text>
				</view>
				<view v-if="module.customerService" @click="onGoService">
					<image src="../../../static/icon/ic_agent.png" mode="aspectFit"></image>
					<text>客服</text>
				</view>
				<view v-if="!(module.customerService && module.shop)" @click="onJumpShopCar">
					<image src="../../../static/icon/ic_details_shoppingcart.png" mode="aspectFit"></image>
					<text>购物车</text>
				</view>
			</view>
			<view class="btn_box" v-if="dataInfo.goodsStatus == 3001"><button class="gray">商品已售空</button></view>
			<view class="btn_box" v-else-if="dataInfo.goodsStatus == 3002"><button class="gray">商品已下架</button></view>
			<view class="btn_box" v-else-if="dataInfo.goodsType == 'spike'">
				<button @click="specificationPopupChange(2000)">加入购物车</button>
				<button @click="specificationPopupChange(3000)" class="active">立即抢购</button>
			</view>
			<view class="btn_box" v-else-if="dataInfo.goodsType == 'pt'">
				<button @click="specificationPopupChange(3000)">单独购买{{ dataInfo.priceDiscount }}</button>
				<button class="active" @click="specificationPopupChange(4000, 0)">发起拼团{{ selectSpecData.ptPriceStr || dataInfo.ptPrice }}</button>
			</view>
			<view class="btn_box" v-else-if="dataInfo.goodsType == 'cut'">
				<button class="active" @click="specificationPopupChange(5000)">发起砍价</button>
			</view>
			<view class="btn_box" v-else>
				<button @click="specificationPopupChange(2000)">加入购物车</button>
				<button @click="specificationPopupChange(3000)" class="active">立即购买</button>
			</view>
		</view>
		<!-- 拼团查看全部 -->
		<z-popup v-model="fightPopupShow" type="2000">
			<view class="fight_popup_box">
				<view class="popup_title">正在拼团</view>
				<view class="close" @click="fightPopupShow = false"></view>
				<scroll-view scroll-y="true">
					<view class="fight_item" v-for="(item, index) of popupFightList" :key="index" @click="specificationPopupChange(4000, item.objId)">
						<image :src="item.userHeadImg" mode="aspectFill"></image>
						<view class="info">
							<view class="name_people">
								<view class="name">{{ item.userNickName }}</view>
								<view class="people">
									还差
									<text>{{ item.ptRemaining }}</text>
									人拼成
								</view>
							</view>
							<view class="time" v-if="item.buyState == 1000">剩余{{ item.countdown }}</view>
							<view class="time" v-else>拼团已结束</view>
						</view>
						<button>去拼单</button>
					</view>
				</scroll-view>
			</view>
		</z-popup>
		<!-- 规格选择 -->
		<z-popup v-model="specificationPopupShow" @on-hide="specificationPopupChange(0)">
			<view class="specification_popup_box">
				<view class="close" @click="specificationPopupChange(0)"></view>
				<view class="goods_info">
					<image v-if="dataInfo.headImgs" :src="dataInfo.headImgs[0]" mode="aspectFill"></image>
					<view class="info">
						<view class="price" v-if="dataInfo.goodsType == 'spike'">
							<text>{{ selectSpecData.ptPriceStr || dataInfo.ptPrice }}</text>
						</view>
						<view class="price" v-else-if="dataInfo.goodsType == 'pt' && specificationPopupState == 4000">
							<text>{{ selectSpecData.ptPriceStr || dataInfo.ptPrice }}</text>
						</view>
						<view class="price" v-else>
							<text>{{ selectSpecData.priceStr || dataInfo.priceDiscount }}</text>
						</view>
						<view class="stock" v-if="selectSpecData.objId">库存{{ selectSpecData.stock }}件</view>
						<view class="specification_text" v-if="selectSpecData.objId">选择规格 ”{{ selectSpecData.name }}“</view>
						<view class="specification_text" v-else>选择 规格 数量</view>
					</view>
				</view>
				<scroll-view scroll-y="true" class="spec_scroll">
					<view v-if="dataInfo.isMultiSpec" class="scroll_content">
						<view v-for="(item,index) of dataInfo.attrs" :key="index">
							<view class="specification_title">{{ item.attrName }}</view>
							<view class="specification_select_box">
								<text :class="{ active: item.selectedId == childItem.objId }" v-for="(childItem, childIndex) of item.values"
								 :key="childIndex" @click="onSelectMultSpecification(index, childItem)">
									{{ childItem.attrVal }}
								</text>
							</view>
						</view>
						<view class="select_num_box">
							<view class="name">购买数量</view>
							<view class="num_box">
								<button :class="{ active: goodsNum > 1 }" @click="onReduce">-</button>
								<text>{{ goodsNum }}</text>
								<button :class="{ active: goodsNum < selectSpecData.stock }" @click="onPlus">+</button>
							</view>
						</view>
					</view>
					<view v-else class="scroll_content">
						<view class="specification_title">规格</view>
						<view class="specification_select_box">
							<text :class="{ active: selectSpecData.objId == item.objId, gray: item.stock <= 0 }" v-for="(item, index) of dataInfo.spec"
							 :key="index" @click="onSelectSpecification(item)">
								{{ item.name }}
							</text>
						</view>
						<view class="select_num_box">
							<view class="name">购买数量</view>
							<view class="num_box">
								<button :class="{ active: goodsNum > 1 }" @click="onReduce">-</button>
								<text>{{ goodsNum }}</text>
								<button :class="{ active: goodsNum < selectSpecData.stock }" @click="onPlus">+</button>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="submit_btn_box">
					<view class="btn_box" v-if="dataInfo.goodsStatus == 3001"><button class="gray">商品已售空</button></view>
					<view class="btn_box" v-else-if="dataInfo.goodsStatus == 3002"><button class="gray">商品已下架</button></view>
					<view class="btn_box" v-else-if="!selectSpecData.objId"><button class="gray">确定</button></view>
					<view class="btn_box" v-else-if="selectSpecData.objId && selectSpecData.stock == 0"><button class="gray">该规格库存不足</button></view>
					<view v-else-if="specificationPopupState == 1000">
						<view class="btn_box" v-if="dataInfo.goodsType == 'spike'">
							<button @click="onAddShopCar">加入购物车</button>
							<button @click="onBuy" class="active">立即抢购</button>
						</view>
						<view class="btn_box" v-else-if="dataInfo.goodsType == 'pt'">
							<button @click="onBuy">单独购买{{ dataInfo.priceDiscount }}</button>
							<button class="active" @click="onFightBuy(orderMallPtId)">发起拼团{{ selectSpecData.ptPriceStr || dataInfo.ptPrice }}</button>
						</view>
						<view class="btn_box" v-else-if="dataInfo.goodsType == 'cut'">
							<button class="active" @click="onBargainBuy">发起砍价</button>
						</view>
						<view class="btn_box" v-else>
							<button @click="onAddShopCar">加入购物车</button>
							<button @click="onBuy" class="active">立即购买</button>
						</view>
					</view>
					<view v-else class="btn_box">
						<button class="active" @click="onConfirm">确定</button>
					</view>
				</view>
			</view>
		</z-popup>
		<!-- 服务信息 -->
		<z-popup v-model="servicePopupShow">
			<view class="service_popup_box">
				<view class="service_box">
					<view class="service_item">
						<view class="service_title">
							<view class="label">赔</view>
							<text>假一赔四</text>
						</view>
						<view class="tip">正品保障，假一赔四</view>
					</view>
					<view class="service_item">
						<view class="service_title">
							<view class="label">退</view>
							<text>过敏包退</text>
						</view>
						<view class="tip">签收60天内，使用商品过敏并提供有效凭证的，商家48小时内响应并退货退款，诚信用户享极速退款</view>
					</view>
					<view class="service_item">
						<view class="service_title">
							<view class="label">七</view>
							<text>七天无理由退换</text>
						</view>
						<view class="tip">满足相应条件时，消费者可申请“七天无理由退换货”</view>
					</view>
					<view class="service_item">
						<view class="service_title">
							<view class="label">速</view>
							<text>急速退款</text>
						</view>
						<view class="tip">诚信用户在退货寄出后，享受极速退款到账</view>
					</view>
				</view>
				<view class="form_but"><button class="active" @click="servicePopupShow = false">完成</button></view>
			</view>
		</z-popup>
		<!-- 产品参数 -->
		<z-popup v-model="parameterPopupShow">
			<view class="parameter_popup_box">
				<view class="popup_title">产品参数</view>
				<scroll-view scroll-y="true">
					<view class="parameter_box">
						<view class="parameter_item">
							<view class="name">品牌</view>
							<view class="value">传世草</view>
						</view>
						<view class="parameter_item">
							<view class="name">品牌</view>
							<view class="value">传世草</view>
						</view>
						<view class="parameter_item">
							<view class="name">品牌</view>
							<view class="value">传世草</view>
						</view>
						<view class="parameter_item">
							<view class="name">品牌</view>
							<view class="value">传世草</view>
						</view>
						<view class="parameter_item">
							<view class="name">品牌</view>
							<view class="value">传世草</view>
						</view>
					</view>
				</scroll-view>
				<view class="form_but"><button class="active" @click="parameterPopupShow = false">完成</button></view>
			</view>
		</z-popup>
		<view class="video_box" v-if="videoShow" @click="videoShow = false">
			<video :src="videoUrl" autoplay="true" controls></video>
			<image class="video_close" src="../../../static/icon/icon_back_a.png"></image>
		</view>
	</view>
</template>

<script>
	import {
		appShare,
		publicShare
	} from '@/config/utils';
	import zPopup from '@/components/common/popup';
	import commentItem from '@/components/module/comment_item';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			commentItem,
			zPopup
		},
		data() {
			return {
				dataInfo: {
					"name": "",
					"headImgs": [],
					"introduceContent": "",
					"introduceImgs": [],
					"priceShop": "",
					"priceDiscount": "",
					"ptPrice": "",
					"pricePostage": "",
					"numSales": 0,
					"shopName": "",
					"shopLogo": "",
					"longitude": "",
					"latitude": "",
					"address": "",
					"commentNum": 0,
					"comments": [],
					"collection": false,
					"share": {
						"shareUrl": "",
						"shareTitle": "",
						"shareContent": "",
						"shareImg": "",
						"shareRegisterUrl": null,
						"pathMallShop": "",
						"pathMallGoods": "",
						"pathMallPtGoods": "",
						"pathMallPackage": "",
						"pathWmShop": "",
						"pathTgShop": "",
						"pathTgGoods": "",
						"pathHotelShop": "",
						"pathHotelHomestay": "",
						"pathStall": "",
						"pathEasy": "",
						"pathMarket": "",
						"pathArticle": ""
					},
					"spec": [],
					"goodsRecommendShare": {
						"recommendCodeGoods": "",
						"mainLogo": "",
						"goodsImg": "",
						"goodsPrice": "",
						"goodsName": ""
					},
					"videoUrl": null,
					"goodsType": "",
					"spikeBeginTime": "",
					"spikeEndTime": "",
					"spikeDiscount": 0,
					"shopCollect": 0,
				},
				videoUrl: '',
				videoShow: false,
				swiperIndex: 0,
				fightPopupShow: false,
				// 判断是规格选择 :
				// 选择 : 1000
				// 加入购物车 : 2000
				// 立即购买 : 3000
				// 拼团购买 : 4000
				specificationPopupState: 0,
				specificationPopupShow: false,
				servicePopupShow: false,
				parameterPopupShow: false,
				// 规格
				selectSpecData: {},
				// 选择的数量
				goodsNum: 1,
				// 秒杀倒计时
				countdownHour: '',
				countdownMinute: '',
				countdownSecond: '',
				// 秒杀状态：
				// 1000 可以购买
				// 2000 还未开始
				// 3000 已结束
				buyState: 1000,
				// 拼团列表
				popupFightList: [],
				orderMallPtId: 0,
				// 为你推荐的商品
				likeGoodsList: [],
				module: {}
			};
		},
		computed: {
			...mapState(['chatScenesInfo', "userInfo"])
		},
		//第一次加载
		onLoad(e) {
			this.module = this.$base.module;
			if (e.objId) {
				this.objId = e.objId;
				this.pageData();
			} else {
				this.chatScenesRecursive();
			}
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline'],
			})
			// #endif
		},
		//页面显示
		onShow() {
			this.$nextTick(() => {
				UnityLoader.instantiate("banner_swiper", "http://qn.kemean.cn/upload/202012/29/DemoWebGL.json")
				// // create the object player with the container
				// let obj = new object2vrPlayer("banner_swiper");
				// obj.readConfigUrl("http://qn.kemean.cn/upload/202012/25/0_0_out.xml");
				// // hide the URL bar on the iPhone
				// setTimeout(function() {
				// 	hideUrlBar();
				// }, 10);
			});
		},
		//方法
		methods: {
			chatScenesRecursive() {
				if (this.chatScenesInfo.objId) {
					this.objId = this.chatScenesInfo.objId;
					this.pageData();
				} else {
					setTimeout(() => {
						this.chatScenesRecursive();
					}, 500);
				}
			},
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			onShare() {
				appShare(this.dataInfo.share);
			},
			onShowVideo() {
				this.videoUrl = this.dataInfo.videoUrl;
				this.videoShow = true;
			},
			// 规格弹出变化
			specificationPopupChange(val, orderMallPtId) {
				this.judgeLogin(() => {
					this.specificationPopupState = val;
					if (val == 4000 && orderMallPtId) {
						this.orderMallPtId = orderMallPtId;
					}
					if (val == 1000 || val == 2000 || val == 3000 || val == 4000 || val == 5000) {
						this.specificationPopupShow = true;
					} else {
						this.specificationPopupShow = false;
					}
				});
			},
			// 跳转购物车
			onJumpShopCar() {
				if (this.module.shopCarPage) {
					uni.navigateTo({
						url: '/pages/shopCar/shopCar'
					});
				} else {
					uni.switchTab({
						url: '/pages/shopCar/shopCar'
					});
				}
			},
			// 轮播图变化
			onSwiperChange(e) {
				this.swiperIndex = e.detail.current;
			},
			// 进入客服
			onGoService() {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: '/pages/message/serviceChat?shopType=1501&objId=' + this.dataInfo.shopId +
							'&roomName=' + this.dataInfo.shopName
					});
				});
			},
			// 进入店铺
			onGoStore() {
				uni.navigateTo({
					url: '/pages/home/shop/shop?objId=' + this.dataInfo.shopId
				});
			},
			// 商品详情跳转
			onGoodsJump(item) {
				uni.navigateTo({
					url: '/pages/home/shop/goodsDetail?objId=' + this.dataInfo.objId
				});
			},
			// 打开拼团弹窗
			onShowFightPopup() {
				if (this.popupFightList.length > 2) {
					this.fightPopupShow = true;
				} else {
					uni.showToast({
						title: '暂无更多拼团',
						icon: 'none'
					});
				}
			},
			// 加入购物车
			onAddShopCar() {
				this.judgeLogin(() => {
					this.$http
						.post('api/mall/cart/shop_goods/v1/add', {
							shopId: this.dataInfo.shopId,
							goodsId: this.dataInfo.objId,
							goodsSpecId: this.selectSpecData.objId,
							goodsNum: this.goodsNum
						})
						.then(res => {
							uni.showToast({
								title: '添加成功'
							});
							this.specificationPopupChange(0);
							this.selectSpecData = {};
						});
				});
			},
			// 立即购买
			onBuy() {
				this.judgeLogin(() => {
					let goodsInfo = {
						goodsId: this.dataInfo.objId,
						goodsNum: this.goodsNum
					};
					if (this.selectSpecData.objId) {
						goodsInfo.goodsSpecId = this.selectSpecData.objId;
					}
					this.$store.commit('setPreOrderData', {
						goods: [goodsInfo],
						shopId: this.dataInfo.shopId,
						shoppingCart: false
					});
					this.specificationPopupChange(0);
					uni.navigateTo({
						url: '/pages/shopCar/confirmOrder'
					});
				});
			},
			// 拼团购买
			onFightBuy(orderMallPtId) {
				if (!orderMallPtId) {
					orderMallPtId = 0;
				}
				this.judgeLogin(() => {
					let goodsInfo = {
						goodsId: this.dataInfo.objId,
						goodsNum: this.goodsNum
					};
					if (this.selectSpecData.objId) {
						goodsInfo.goodsSpecId = this.selectSpecData.objId;
					}
					this.$store.commit('setPreOrderData', {
						goods: [goodsInfo],
						shopId: this.dataInfo.shopId,
						shoppingCart: false,
						orderMallPtId: orderMallPtId,
						fightBuy: true
					});
					this.specificationPopupChange(0);
					uni.navigateTo({
						url: '/pages/shopCar/confirmOrder'
					});
				});
			},
			// 砍价购买
			onBargainBuy() {
				this.judgeLogin(() => {
					this.$http
						.get('api/order_mall_cut/v1/start_cut', {
							goodsId: this.dataInfo.objId,
							specId: this.selectSpecData.objId,
						})
						.then(res => {
							this.specificationPopupChange(0);
							this.selectSpecData = {};
							uni.navigateTo({
								url: '/pages/bargain/bargainInitiate?cutNo=' + res.cutNo
							});
						});
				});
			},
			// 确定
			onConfirm() {
				if (this.specificationPopupState == 2000) {
					this.onAddShopCar();
				} else if (this.specificationPopupState == 3000) {
					this.onBuy();
				} else if (this.specificationPopupState == 4000) {
					this.onFightBuy(this.orderMallPtId);
				} else if (this.specificationPopupState == 5000) {
					this.onBargainBuy();
				} else {
					this.specificationPopupChange(0);
				}
			},
			// 减法
			onReduce() {
				if (this.goodsNum > 1) {
					this.goodsNum -= 1;
				}
			},
			// 增加数量
			onPlus() {
				if (this.dataInfo.goodsType == 'cut') {
					uni.showToast({
						title: '砍价商品每次限买一个',
						icon: 'none'
					});
				} else {
					if (this.selectSpecData.objId) {
						if (this.goodsNum < this.selectSpecData.stock) {
							this.goodsNum += 1;
						}
					} else {
						uni.showToast({
							title: '请选择规格',
							icon: 'none'
						});
					}
				}

			},
			// 收藏
			onCollection() {
				this.judgeLogin(() => {
					this.$http
						.post('api/collect/v1/operate_data', {
							type: this.isPackage ? 1403 : 1402,
							objIds: [this.dataInfo.objId]
						})
						.then(res => {
							if (this.dataInfo.collection) {
								uni.showToast({
									title: '取消收藏成功'
								});
								this.dataInfo.collection = false;
							} else {
								uni.showToast({
									title: '收藏成功'
								});
								this.dataInfo.collection = true;
							}
						});
				});
			},
			// 选择规格
			onSelectSpecification(item) {
				if (item.stock > 0) {
					this.selectSpecData = item;
				}
			},
			onSelectMultSpecification(index, childItem) {
				let current = this.dataInfo.attrs[index].selectedId;
				this.$set(this.dataInfo.attrs, index, {
					...this.dataInfo.attrs[index],
					selectedId: childItem.objId
				})
				let ids = [];
				let state = true;
				this.dataInfo.attrs.forEach(item => {
					if (item.selectedId) {
						ids.push(item.selectedId);
					} else {
						state = false;
						return;
					}
				});
				if (state) {
					this.$http
						.post('api/mall/goods/v1/attr_val_to_spec', {
							goodsId: this.objId,
							ids: ids
						}, {
							load: false
						})
						.then(res => {
							if (res && res.stock > 0) {
								this.selectSpecData = res;
							} else {
								uni.showToast({
									title: "此规格暂无库存",
									icon: "none"
								});
								this.$set(this.dataInfo.attrs, index, {
									...this.dataInfo.attrs[index],
									selectedId: current
								});
							}
						});
				}
			},
			pageData() {
				this.$http
					.get('api/mall/goods/v2/info', {
						objId: this.objId
					})
					.then(res => {
						if (res.introduceContent) {
							res.introduceContent = res.introduceContent.split(/\n/);
						}
						if (res.isMultiSpec) {
							res.attrs.map(item => {
								item.selectedId = "";
								return item;
							});
						}
						this.dataInfo = res;
						if (res.goodsType == 'spike') {
							this.getCountdown();
						} else if (res.goodsType == 'pt') {
							this.getFightList();
						}
						if (res.spec && res.spec.length == 1) {
							this.selectSpecData = res.spec[0];
						}
						uni.setNavigationBarTitle({
							title: res.name
						});
						// #ifdef H5
						publicShare(res.share);
						// #endif
					});
				// this.$http
				//     .post(
				//         'api/searh/v1/list', {
				//             pageNo: 1,
				//             pageSize: 6,
				//             locatType: 1901,
				//             areaId: 0
				//         }, {
				//             loadMore: false
				//         }
				//     )
				//     .then(res => {
				//         this.likeGoodsList = res.data;
				//     });
			},
			// 图片预览的方法
			onPreviewImage(currentUrl, ulsList) {
				uni.previewImage({
					current: currentUrl,
					urls: ulsList,
					loop: true,
					indicator: 'default'
				});
			},
			// 秒杀倒计时
			getCountdown() {
				let spikeEndTime = this.dataInfo.spikeEndTime.replace(/-/g, '/');
				let spikeBeginTime = this.dataInfo.spikeBeginTime.replace(/-/g, '/');
				let beginTime = new Date(spikeBeginTime).getTime();
				let endTime = new Date(spikeEndTime).getTime();
				const _this = this;
				recursion();

				function recursion() {
					let currentTime = new Date().getTime();
					if (currentTime < beginTime) {
						_this.buyState = 2000;
					} else if (currentTime > endTime) {
						_this.buyState = 3000;
					} else {
						_this.buyState = 1000;
						let surplus = (endTime - currentTime) / 1000;
						let hour = parseInt(surplus / 3600);
						let minute = parseInt((surplus - hour * 3600) / 60);
						let second = parseInt(surplus - hour * 3600 - minute * 60);
						if (hour < 10) {
							hour = '0' + hour;
						}
						if (minute < 10) {
							minute = '0' + minute;
						}
						if (second < 10) {
							second = '0' + second;
						}
						_this.countdownHour = hour;
						_this.countdownMinute = minute;
						_this.countdownSecond = second;
						setTimeout(() => {
							recursion();
						}, 1000);
					}
				}
			},
			// 拼团倒计时
			getFightCountdown(index) {
				let item = this.popupFightList[index];
				let spikeEndTime = item.endTime.replace(/-/g, '/');
				let beginTime = new Date().getTime();
				let endTime = new Date(spikeEndTime).getTime();
				const _this = this;
				recursion();

				function recursion() {
					let currentTime = new Date().getTime();
					if (currentTime > endTime) {
						_this.popupFightList[index].buyState = 3000;
					} else {
						_this.popupFightList[index].buyState = 1000;
						let surplus = (endTime - currentTime) / 1000;
						let day = parseInt(surplus / 86400);
						let hour = parseInt((surplus - day * 86400) / 3600);
						let minute = parseInt((surplus - day * 86400 - hour * 3600) / 60);
						let second = parseInt(surplus - day * 86400 - hour * 3600 - minute * 60);
						if (hour < 10) {
							hour = '0' + hour;
						}
						if (minute < 10) {
							minute = '0' + minute;
						}
						if (second < 10) {
							second = '0' + second;
						}
						_this.popupFightList[index].countdown = day + "天" + hour + '时' + minute + '分' + second + "秒";
						_this.$forceUpdate();
						setTimeout(() => {
							recursion();
						}, 1000);
					}
				}
			},
			// 获取拼团列表
			getFightList() {
				this.$http
					.post('api/order_mall_pt/v1/list_data', {
						goodsId: this.objId
					})
					.then(res => {
						res.map((item, index) => {
							item.countdown = '';
							item.buyState = 4000;
							return item;
						});
						this.popupFightList = res;
						res.forEach((item, index) => {
							this.getFightCountdown(index);
						});
					});
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		onPageScroll(e) {
			this.$refs.navBar.pageScroll(e);
		},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		onShareTimeline() {
			let shareInfo = {
				title: this.dataInfo.name,
				query: "objId=" + this.dataInfo.objId
			};
			if (this.userInfo.uid) {
				shareInfo.query += "&recommendCode=" + this.userInfo.uid;
			}
			if (this.dataInfo.headImgs && this.dataInfo.headImgs.length > 0) {
				shareInfo.imageUrl = this.dataInfo.headImgs[0];
			}
			return shareInfo;
		},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare({
				title: this.dataInfo.name
			});
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.nav_right_info {
		display: flex;
		/* #ifndef MP */
		padding-right: 30rpx;

		/* #endif */
		.collect {
			width: 60rpx;
			height: 60rpx;
			@include bis('../../../static/icon/ic_collection_white.png', 60% 60%);
			margin-left: 25rpx;
			background-color: transparent;
			border-radius: 50%;

			&.active {
				background-image: url('../../../static/icon/ic_product_collection_white.png');
			}

			&.black {
				background-image: url('../../../static/icon/ic_collection_white.png');
				background-color: rgba($color: #000000, $alpha: 0.2);

				&.active {
					background-image: url('../../../static/icon/ic_product_collection_white.png');
				}
			}
		}

		.share {
			width: 60rpx;
			height: 60rpx;
			@include bis('../../../static/icon/ic_share_white.png', 60% 60%);
			margin-left: 25rpx;
			background-color: transparent;
			border-radius: 50%;

			&.black {
				background-image: url('../../../static/icon/ic_share_white.png');
				background-color: rgba($color: #000000, $alpha: 0.2);
			}
		}

		.shop_car {
			width: 60rpx;
			height: 60rpx;
			@include bis('../../../static/icon/ic_shoppingcart_white.png', 60% 60%);
			margin-left: 25rpx;
			background-color: transparent;
			border-radius: 50%;

			&.black {
				background-image: url('../../../static/icon/ic_shoppingcart_white.png');
				background-color: rgba($color: #000000, $alpha: 0.2);
			}
		}

		.goods_poster {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			@include bis('../../../static/icon/icon_qR_code.png', 60% 60%);

			&.black {
				background-image: url('../../../static/icon/icon_qR_code.png');
				background-color: rgba($color: #000000, $alpha: 0.2);
			}
		}
	}

	.banner_swiper {
		position: relative;
		width: 100%;
		height: 100vw;

		swiper {
			height: 100vw;
			position: relative;

			video {
				width: 100%;
				height: 100vw;
			}

			.video_mask {
				width: 100%;
				height: 100vw;
				position: absolute;
				bottom: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 0.5);
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.swiper_image {
				width: 100%;
				height: 100vw;
			}
		}

		.swiper_pages {
			position: absolute;
			bottom: 50rpx;
			right: 30rpx;
			height: 40rpx;
			background-color: rgba(0, 0, 0, 0.5);
			line-height: 40rpx;
			border-radius: 20rpx;
			color: #fff;
			font-size: 24rpx;
			padding: 0 20rpx;

			text {
				margin: 0 6rpx;
			}
		}
	}

	.goods_info_box {
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&.spike {
			@include bis('../../../static/icon/theme/bg_seckill.png', 100% 100%);

			.price_box {
				.sales_price {
					.label {
						border: solid 2rpx #fff;
						color: #fff;
					}

					.price {
						color: #fff;
					}
				}

				.original_price {
					color: #fff;
				}
			}

			.countdown {
				display: flex;
				flex-direction: column;

				>text {
					font-size: 24rpx;
					color: $themeColor;
				}

				.time {
					margin-top: 12rpx;
					height: 42rpx;
					border-radius: 8rpx;
					padding: 0 10rpx;
					font-size: 24rpx;
					color: $themeColor;
					line-height: 42rpx;
				}

				.countdown_value {
					display: flex;
					align-items: center;
					margin-top: 12rpx;

					view {
						min-width: 38rpx;
						height: 42rpx;
						background-color: $themeColor;
						border-radius: 8rpx;
						padding: 0 8rpx;
						font-size: 24rpx;
						text-align: center;
						color: #ffffff;
						line-height: 42rpx;
					}

					text {
						font-size: 24rpx;
						color: $themeColor;
						padding: 0 8rpx;
					}
				}
			}
		}

		.price_box {
			.sales_price {
				display: flex;
				align-items: center;

				.label {
					height: 32rpx;
					border-radius: 4rpx;
					border: solid 2rpx $themeColor;
					line-height: 28rpx;
					padding: 0 10rpx;
					font-size: 24rpx;
					color: $themeColor;
					margin-right: 20rpx;
				}

				.price {
					font-size: 24rpx;
					color: #ff3d3d;
					font-weight: bold;

					text {
						font-size: 44rpx;
					}
				}
			}

			.original_price {
				font-size: 24rpx;
				color: #999;
				margin-top: 10rpx;
				text-decoration: line-through;
			}
		}

		.collect {
			display: flex;
			flex-direction: column;
			align-items: center;

			text {
				@include bis('../../../static/icon/ic_notcollected.png');
				width: 40rpx;
				height: 38rpx;

				&.active {
					background-image: url('../../../static/icon/theme/ic_collection.png');
				}
			}

			view {
				font-size: 24rpx;
				color: #333435;
				margin-top: 12rpx;
			}
		}
	}

	.goods_title {
		background-color: #fff;
		padding: 10rpx 30rpx 30rpx 30rpx;
		font-size: 30rpx;
		line-height: 42rpx;
		color: #333333;
		font-weight: bold;

		&.spike {
			padding-top: 30rpx;
		}
	}

	.cell_list {

		.cell_left,
		.cell_right {
			font-size: 28rpx;
			color: #999999;

			&.black {
				color: #333333;
			}
		}
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;

		view {
			font-size: 28rpx;
			color: #333333;
		}

		text {
			font-size: 24rpx;
			color: #999999;
			display: flex;
			align-items: center;

			&:after {
				content: '';
				@include bis('../../../static/icon/icon_enter.png');
				width: 11rpx;
				height: 20rpx;
				margin-left: 11rpx;
			}

			&.color {
				color: $themeColor;

				&:after {
					background-image: url('../../../static/icon/theme/ic_to_red.png');
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}

	.fight_info_box {
		margin-top: 20rpx;
		background-color: #fff;
	}

	.fight_item {
		padding: 30rpx;
		display: flex;
		align-items: center;
		border-top: 2rpx solid #f5f5f5;

		image {
			width: 80rpx;
			height: 80rpx;
			margin-right: 30rpx;
			flex-shrink: 0;
			border-radius: 50%;
		}

		.info {
			width: calc(100% - 281rpx);

			.name_people {
				display: flex;
				align-items: center;

				.name {
					font-size: 28rpx;
					color: #333333;
					max-width: calc(100% - 150rpx);
					@include toe();
				}

				.people {
					font-size: 24rpx;
					color: #333333;
					margin-left: 10rpx;

					text {
						color: #ff3d3d;
					}
				}
			}

			.time {
				font-size: 24rpx;
				color: #333333;
			}
		}

		button {
			width: 141rpx;
			height: 66rpx;
			border-radius: 8rpx;
			@include theme('gradient_bg');
			font-size: 28rpx;
			color: #ffffff;
			line-height: 66rpx;
			margin-left: 30rpx;
			flex-shrink: 0;
		}
	}

	.interval {
		height: 120rpx;
	}

	.fixed_nav_box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 98rpx;
		background-color: #ffffff;
		border-top: solid 2rpx #f7f7f7;
		padding-right: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left_info {
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex: 1;

			>view {
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 100rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					font-size: 24rpx;
					color: #333333;
					margin-top: 8rpx;
				}
			}
		}

		.btn_box {
			border-radius: 37rpx;
			overflow: hidden;
			display: flex;
			min-width: 500rpx;

			button {
				flex: 1;
				height: 74rpx;
				background-color: $viceColor;
				border-radius: 0;
				line-height: 74rpx;
				font-size: 28rpx;
				color: $themeColor;

				&.active {
					@include theme('gradient_bg');
					color: #fff;
				}

				&.gray {
					background-color: #eee;
					color: #fff;
				}
			}
		}
	}

	.comment_box {
		margin-top: 20rpx;
		background-color: #fff;
	}

	.recommend_box {
		margin-top: 20rpx;
		background-color: #fff;

		.goods_box {
			padding: 0 30rpx 0rpx 30rpx;
			display: flex;
			flex-wrap: wrap;

			.goods_item {
				width: 222rpx;
				padding-bottom: 30rpx;
				margin-right: 12rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}

				image {
					width: 222rpx;
					height: 222rpx;
				}

				.name {
					font-size: 28rpx;
					color: #333435;
					margin-top: 30rpx;
				}

				.price {
					font-size: 28rpx;
					color: #ff3d3d;
					margin-top: 20rpx;
				}
			}
		}
	}

	.shop_info_box {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		align-items: center;

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			flex-shrink: 0;
			margin-right: 30rpx;
		}

		.info {
			flex: 1;

			.name {
				font-size: 32rpx;
				color: #333333;
			}

			.other {
				display: flex;
				align-items: center;
				margin-top: 10rpx;

				.label {
					font-size: 24rpx;
					color: #ffffff;
					height: 30rpx;
					border-radius: 15rpx;
					@include theme('gradient_bg');
					line-height: 30rpx;
					padding: 0 15rpx;
				}

				.shop_collect {
					font-size: 24rpx;
					color: #999999;
					margin-left: 20rpx;
				}
			}
		}

		button {
			width: 140rpx;
			height: 48rpx;
			@include theme('gradient_bg');
			border-radius: 24rpx;
			font-size: 24rpx;
			color: #ffffff;
			line-height: 48rpx;
		}
	}

	.goods_details_box {
		margin-top: 20rpx;
		background-color: #fff;

		.content {
			padding: 20rpx 30rpx;
			font-size: 28rpx;
			color: #333;
			line-height: 180%;
		}

		image {
			width: 100%;
		}
	}

	.fight_popup_box {
		background-color: #fff;
		width: 630rpx;
		margin-bottom: 120rpx;
		position: relative;

		.popup_title {
			font-size: 32rpx;
			color: #333333;
			padding: 30rpx;
			border-bottom: 2rpx solid #f5f5f5;
			text-align: center;
		}

		.close {
			position: absolute;
			bottom: -120rpx;
			left: 50%;
			transform: translateX(-50%);
			@include bis('../../../static/icon/ic_package_close.png');
			width: 60rpx;
			height: 60rpx;

			&:before {
				content: '';
				position: absolute;
				top: -60rpx;
				left: 50%;
				transform: translateX(-50%);
				height: 60rpx;
				width: 2rpx;
				background-color: #fff;
			}
		}

		scroll-view {
			height: 689rpx;
		}
	}

	.specification_popup_box {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;

		.close {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			@include bis('../../../static/icon/ic_package_close.png');
			width: 40rpx;
			height: 40rpx;
		}

		.goods_info {
			padding: 30rpx;
			display: flex;
			align-items: center;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
				flex-shrink: 0;
				margin-right: 30rpx;
			}

			.info {
				.price {
					font-size: 24rpx;
					color: #ff3d3d;

					text {
						font-size: 36rpx;
					}
				}

				.stock {
					font-size: 24rpx;
					color: #999999;
					margin-top: 15rpx;
				}

				.specification_text {
					font-size: 24rpx;
					color: #333435;
					margin-top: 15rpx;
				}
			}
		}

		.spec_scroll {
			max-height: 660rpx;
		}

		.scroll_content {
			padding: 0 30rpx 60rpx 30rpx;

			.specification_title {
				font-size: 28rpx;
				color: #333435;
				padding-top: 10rpx;
			}

			.specification_select_box {
				padding: 30rpx 0 10rpx 0;
				display: flex;
				flex-wrap: wrap;

				text {
					height: 62rpx;
					background-color: #f7f7f7;
					border-radius: 8rpx;
					line-height: 62rpx;
					margin-bottom: 20rpx;
					margin-right: 40rpx;
					padding: 0 20rpx;

					&.active {
						background-color: $viceColor2;
						border: solid 2rpx $themeColor;
						color: $themeColor;
					}

					&.gray {
						background-color: #f1f1f1;
						color: #eee;
					}
				}
			}

			.select_num_box {
				padding-top: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.name {
					font-size: 28rpx;
					color: #333435;
				}

				.num_box {
					display: flex;

					button {
						width: 60rpx;
						height: 60rpx;
						background-color: #f7f7f7;
						line-height: 60rpx;
						color: #cccccc;

						&:first-child {
							border-radius: 8rpx 0rpx 0rpx 8rpx;
						}

						&:last-child {
							border-radius: 0rpx 8rpx 8rpx 0rpx;
						}

						&.active {
							background-color: #e5e5e5;
							color: #999999;
						}
					}

					text {
						width: 60rpx;
						height: 60rpx;
						background-color: #e5e5e5;
						text-align: center;
						line-height: 60rpx;
						margin: 0 4rpx;
						font-size: 30rpx;
						color: #333;
					}
				}
			}
		}

		.submit_btn_box {
			padding: 30rpx 30rpx;
		}

		.btn_box {
			border-radius: 37rpx;
			overflow: hidden;
			display: flex;
			min-width: 500rpx;

			button {
				flex: 1;
				height: 74rpx;
				background-color: $viceColor;
				border-radius: 0;
				line-height: 74rpx;
				font-size: 28rpx;
				color: $themeColor;

				&.active {
					@include theme('gradient_bg');
					color: #fff;
				}

				&.gray {
					background-color: #eee;
					color: #fff;
				}
			}
		}
	}

	.service_popup_box {
		background-color: #fff;

		.service_box {
			padding: 30rpx;

			.service_item {
				padding: 27rpx 0;

				.service_title {
					display: flex;
					align-items: center;

					.label {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background-color: $viceColor;
						color: $themeColor;
						text-align: center;
						line-height: 40rpx;
						font-size: 24rpx;
						margin-right: 20rpx;
					}

					text {
						font-size: 32rpx;
						color: #333333;
					}
				}

				.tip {
					margin-top: 30rpx;
					padding-left: 60rpx;
					font-size: 28rpx;
					color: #999999;
				}
			}
		}

		.form_but {
			margin-top: 0;
		}
	}

	.parameter_popup_box {
		background-color: #ffffff;

		.popup_title {
			padding: 40rpx;
			text-align: center;
			font-size: 36rpx;
			color: #333333;
		}

		scroll-view {
			max-height: 800rpx;
		}

		.parameter_box {
			padding: 0 30rpx;

			.parameter_item {
				padding: 30rpx 0;
				display: flex;
				align-items: center;
				border-top: 2rpx solid #e5e5e5;

				&:first-child {
					border-top: 0;
				}

				.name {
					font-size: 28rpx;
					color: #999999;
					width: 190rpx;
				}

				.value {
					font-size: 28rpx;
					color: #333333;
				}
			}
		}

		.form_but {
			margin-top: 0;
		}
	}

	.video_box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		background-color: #000;

		video {
			width: 100%;
			height: 90%;
		}
	}

	.video_close {
		position: absolute;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 60rpx;
		z-index: 10;
	}
</style>
